<!-- 基础信息 -->
<template>
	<view class="Basics">
		<view class="BasicsBox">
			<view class="leftBox">
				当前身份
			</view>
			<view class="RightBox">
				<view class="tag" @click="checkOB('CurrentRole',0)" :class="{'checkTag':user.CurrentRole===0}">
					职场人
				</view>
				<view class="tag" @click="checkOB('CurrentRole',1)" :class="{'checkTag':user.CurrentRole===1}">
					学生
				</view>
			</view>
		</view>
		<view class="BasicsBox">
			<view class="leftBox">
				性别
			</view>
			<view class="RightBox">
				<view class="tag" :class="{'checkTag':user.Sex==1}" @click="checkOB('Sex',1)">
					男
				</view>
				<view class="tag" :class="{'checkTag':user.Sex==2}" @click="checkOB('Sex',2)">
					女
				</view>
			</view>
		</view>
		<view class="BasicsBox2">
			<view class="title">
				姓名
			</view>
			<u--input v-model="user.Name" placeholderClass="userName" placeholder="请输入用户名称"
				:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('Name',val)"
				border="none"></u--input>
		</view>
		<view class="BasicsBox" @click="AddressMD">
			<view class="leftBox">
				<view class="">
					现居地址
				</view>
				<view class="Address" :style="{color:user.Address?'#000':'#C1C1C1'}">
					{{user.Address?user.Address:'请选择地址'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="shengri('Birthday')">
			<view class="leftBox">
				<view class="">
					您的生日
				</view>
				<view class="Address" :style="{color:user.Birthday?'#000':'#C1C1C1'}">
					{{user.Birthday?user.Birthday:'请选择您的生日'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="shengri('StartWorkDate')">
			<view class="leftBox">
				<view class="">
					参加工作时间
				</view>
				<view class="Address" :style="{color:user.StartWorkDate?'#000':'#C1C1C1'}">
					{{user.StartWorkDate?user.StartWorkDate:'请选择参加工作时间'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="statusMD()">
			<view class="leftBox">
				<view class="">
					当前求职状态
				</view>
				<view class="Address" :style="{color:CurrentStatus?'#000':'#C1C1C1'}">
					{{CurrentStatus?CurrentStatus:'请填写您的求职状态'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<u-datetime-picker :show="show" v-if="show" v-model="time" @confirm="confirm1" @cancel="show=false"
			mode="year-month" :maxDate="maxDate" :minDate="minDate" />
		<u-picker :show="show2" :columns="columns" keyName="label" @confirm="confirm2" @cancel="show2=false"
			:defaultIndex="defaultIndex" />
	</view>
</template>

<script>
	import {
		atPresentTime,
		TimeString2,
		TimeString3
	} from '@/utils/Time.js'
	import addPopup from "@/pages/component/addPopup/index.vue";
	export default {
		data() {
			return {
				time: '',
				type: '',
				show: false, //工作时间
				minDate: 0,
				maxDate: 0,
				columns: [
					[{
						label: '离职-随时到岗',
						id: 0
					}, {
						label: '在职-暂不考虑',
						id: 1
					}, {
						label: '在职-考虑机会',
						id: 2
					}, {
						label: '在职-月内到岗',
						id: 3
					}]
				],
				show2: false,
				CurrentStatus: '',
				defaultIndex: [0]
			};
		},
		props: {
			user: {
				typeof: Object,
				default: {

				}
			}
		},
		created() {
			this.maxDate = atPresentTime()
			if (this.user.CurrentStatus === undefined || this.user.CurrentStatus === '') {
				this.defaultIndex = []
				this.CurrentStatus = ''
			} else {
				this.defaultIndex = [this.user.CurrentStatus]
				this.CurrentStatus = this.columns[0][this.user.CurrentStatus].label
			}
		},
		methods: {
			checkOB(name, value) {
				let user = JSON.parse(JSON.stringify(this.user))
				user[name] = value
				this.$emit('update:user', user)
				console.log(this.user);
			},
			AddressMD() {
				let that = this
				uni.chooseLocation({
					latitude: that.user.Latitude,
					longitude: that.user.longitude,
					success: function(res) {
						let user = JSON.parse(JSON.stringify(that.user))
						user.Address = res.address
						user.longitude = res.longitude
						user.latitude = res.latitude
						that.$emit('update:user', user)
					}
				})
			},
			shengri(name) {
				if (this.user[name]) {
					let ti = this.user[name].replace('年', '-').replace('月', '')
					this.time = TimeString3(ti)
				} else {
					this.time = ''
				}
				this.type = name
				this.show = true
			},
			confirm1(val) {
				this.user[this.type] = TimeString2(val.value)
				this.show = false
			},
			statusMD() {
				this.show2 = true
			},
			confirm2(val) {
				this.user.CurrentStatus = val.indexs[0]
				this.CurrentStatus = this.columns[0][val.indexs[0]].label
				this.show2 = false
			},
		},
		components: {
			addPopup
		}
	}
</script>

<style lang="scss" scoped>
	.userName {
		font-weight: 600;
		color: #C1C1C1 !important;
		font-size: 32rpx;
	}

	.Basics {
		display: flex;
		flex-direction: column;
		font-family: PingFang SC-Medium;
		color: #333;

		.BasicsBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.leftBox {}

			.Address {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.RightBox {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-weight: 600;

				.tag {
					box-sizing: border-box;
					padding: 10rpx 0rpx;
					width: 140rpx;
					text-align: center;
					background-color: #F7F8FA;
					margin-right: 10rpx;
					border-radius: 8rpx;
				}

				.checkTag {
					color: #3476FE !important;
					border: 1rpx solid #3476FE !important;
					background-color: #F1F8FF !important;
				}
			}
		}

		.BasicsBox2 {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.title {
				margin-bottom: 20rpx;
			}
		}
	}
</style>